<template>
  <div class="article-list-container">
    <!-- 标题 -->
    <div class="page-title">信息管理</div>

    <!-- 筛选区域 -->
    <el-card class="filter-card" shadow="hover">
      <el-row :gutter="20">
        <!-- 文章标题 -->
        <el-col :span="4">
          <el-input
              v-model="searchParams.title"
              placeholder="请输入文章标题"
              clearable
              prefix-icon="el-icon-search"
          />
        </el-col>
        <!-- 文章分类 -->
        <el-col :span="3">
          <el-select
              v-model="searchParams.category"
              placeholder="文章分类"
              clearable
          >
            <el-option label="全部" value="" />
            <el-option label="美食" value="美食" />
            <el-option label="娱乐" value="娱乐" />
            <el-option label="趣闻" value="趣闻" />
          </el-select>
        </el-col>
<!--
        // 搜索参数
        const searchParams = ref({
        title: '',        // 文章标题
        category: '',     // 文章分类
        status: '',       // 发布状态
        activity: '',     // 关联活动
        timeRange: []     // 更新时间范围
        });
-->

        <!-- 发布状态 -->
        <el-col :span="3">
          <el-select
              v-model="searchParams.status"
              placeholder="发布状态"
              clearable
          >
            <el-option label="全部" value="" />
            <el-option label="已发布" value="1" />
            <el-option label="未发布" value="0" />
          </el-select>
        </el-col>
        <!-- 关联活动 -->
        <el-col :span="3">
          <el-select
              v-model="searchParams.activity"
              placeholder="关联活动"
              clearable
          >
            <el-option label="全部" value="" />
            <el-option label="方特周年庆" value="方特周年庆" />
            <el-option label="水魔方周年庆" value="水魔方周年庆" />
          </el-select>
        </el-col>
        <!-- 更新时间 -->
        <el-col :span="6">
          <el-date-picker
              v-model="searchParams.timeRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 100%"
          />
        </el-col>
        <!-- 操作按钮 -->
        <el-col :span="2">
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button @click="handleReset">重置</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 文章列表 -->
    <el-card class="table-card" shadow="hover" style="margin-top: 20px;">
      <el-table
          :data="tableData"
          border
          style="width: 100%"
          :loading="loading"
          @selection-change="handleSelectionChange"
      >
        <!-- 多选框 -->
        <el-table-column type="selection" width="55" />
        <!-- 编号 -->
        <el-table-column prop="id" label="编号" width="300" />
        <!-- 文章标题 -->
        <el-table-column prop="title" label="文章标题" min-width="150" />
        <!-- 文章分类 -->
        <el-table-column prop="category" label="文章分类" width="120" />
        <!-- 活动标题 -->
        <el-table-column prop="activityTitle" label="活动标题" width="120" />
        <!-- 标签 -->
        <el-table-column prop="tags" label="标签" width="100" />
        <!-- 创建时间 -->
        <el-table-column prop="createTime" label="创建时间" width="250" />
        <!-- 更新时间 -->
        <el-table-column prop="updateTime" label="更新时间" width="250" />
        <!-- 启用状态 -->
        <el-table-column prop="status" label="启用状态" width="120">
          <template #default="scope">
            <el-switch
                v-model="scope.row.status"
                active-value="1"
                inactive-value="0"
                @change="handleStatusChange(scope.row)"
            />
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button
                type="text"
                text-color="#409EFF"
                @click="handleOffline(scope.row)"
            >下线</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="margin-top: 20px; text-align: right;"
      />
    </el-card>
    <!-- 下线确认弹窗 -->
    <el-dialog
        v-model="deleteDialogVisible"
        title="确认下线"
        width="30%"
    >
      <div class="delete-confirm-content">
        确定要下线 <span class="delete-article-title">{{ deleteArticleTitle }}</span> 吗？
        <p class="delete-tip">此操作不可恢复，请谨慎处理。</p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="handleDeleteConfirm">确认下线</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {ElMessage} from "element-plus";
// import axios from 'axios'; // 实际接口请求可启用

// 搜索参数
const searchParams = ref({
  title: '',        // 文章标题
  category: '',     // 文章分类
  status: '',       // 发布状态
  activity: '',     // 关联活动
  timeRange: []     // 更新时间范围
});

// 表格数据（模拟与目标页面一致的数据）
const tableData = ref([
  {
    id: '99eb47c6d7485aaf249201ca57925',
    title: '方特周年庆',
    category: '美食',
    activityTitle: '方特周年庆',
    tags: '娱乐',
    createTime: '2024-06-11 15:50:28',
    updateTime: '2024-06-11 15:50:28',
    status: 0
  },
  {
    id: '735d6c3be4d843a41717d7e16c236',
    title: '方特周年庆',
    category: '娱乐',
    activityTitle: '方特周年庆',
    tags: '趣闻',
    createTime: '2024-06-11 15:49:45',
    updateTime: '2024-06-11 15:49:45',
    status: 0
  },
  {
    id: 'fd481b852044c76b96a4145ca9393',
    title: '水魔方周年庆',
    category: '娱乐',
    activityTitle: '水魔方周年庆',
    tags: '喜剧',
    createTime: '2024-06-11 15:49:02',
    updateTime: '2024-06-11 15:49:02',
    status: 0
  }
  // 可继续补充更多模拟数据...
]);

// 分页参数
const currentPage = ref(1);  // 当前页
const pageSize = ref(10);   // 每页条数
const total = ref(tableData.value.length); // 总条数（模拟）

// 加载状态
const loading = ref(false);

// 初始化：获取列表数据
onMounted(() => {
  fetchTableData();
});

// 获取表格数据（模拟，实际替换为接口请求）
const fetchTableData = () => {
  loading.value = true;
  // 模拟接口延迟
  setTimeout(() => {
    // 实际逻辑：调用接口，替换 tableData
    // axios.post('/api/article/list', {
    //   ...searchParams.value,
    //   page: currentPage.value,
    //   size: pageSize.value
    // }).then(res => {
    //   tableData.value = res.data.records;
    //   total.value = res.data.total;
    // }).finally(() => loading.value = false);

    loading.value = false;
  }, 500);
};
// 下线弹窗相关
const deleteDialogVisible = ref(false);
const deleteArticleId = ref('');
const deleteArticleTitle = ref('');
// 查询
const handleSearch = () => {
  currentPage.value = 1; // 查询后重置页码
  fetchTableData();
};

// 重置
const handleReset = () => {
  searchParams.value = {
    title: '',
    category: '',
    status: '',
    activity: '',
    timeRange: []
  };
  currentPage.value = 1;
  fetchTableData();
};

// 多选框改变
const handleSelectionChange = (val) => {
  console.log('选中项：', val);
  // 可扩展批量操作逻辑（如批量下线）
};

// 状态切换（启用/禁用）
const handleStatusChange = (row) => {
  console.log('切换状态：', row);
  // 实际逻辑：调用接口更新状态
};

// 下线操作

const handleOffline = (row) => {
  deleteArticleId.value = row.id;
  deleteArticleTitle.value = row.title;
  deleteDialogVisible.value = true;
};

//下线确认
const handleDeleteConfirm = () => {
  // 模拟接口请求
  setTimeout(() => {
    deleteDialogVisible.value = false;
    ElMessage.success('下线成功');
    // 过滤表格数据
    tableData.value = tableData.value.filter(item => item.id !== deleteArticleId.value);
    total.value = tableData.value.length;
  }, 500);
};

// 每页条数改变
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchTableData();
};

// 当前页改变
const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchTableData();
};
</script>

<style scoped>
.article-list-container {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 64px); /* 适配顶部导航高度 */
}

/* 标题样式 */
.page-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 10px 0 20px;
}

/* 筛选卡样式 */
.filter-card {
  padding: 20px;
  margin-bottom: 10px;
}

/* 表格卡样式 */
.table-card {
  padding: 20px;
}

/* 表格单元格样式优化 */
.el-table th, .el-table td {
  text-align: center;
}
</style>